<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--引入 Bootstrap -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <title></title>
    <script>
function scr_log(){
    var sc_log = $('#log_content');
    sc_log.animate({scrollTop:sc_log[0].scrollHeight},'fast');
}
$(function () {
    alert('hello world!!!');

    $("#crawl").click(function(){
        alert('hello crawl');
        var s_id = $('#s_id').val();
        var e_id = $('#e_id').val();
        var v = $('#v').prop('checked');
        if(s_id==''||e_id==''||!/^[0-9]{1,5}$/.test(s_id)||!/^[0-9]{1,5}$/.test(e_id)){
            alert('gg');
            return;
        }
        if(v){
            v = 1;
        }else{v=0}

        $.ajax({
            url: "{% url 'crawl' %}",
            data: {start_book_id: s_id, end_book_id: e_id, v:v},
            type: 'POST',
            dataType: 'json',
            async: true,
            success: function(data){
                var data = eval(data);
                alert(data)
            }
        })
    });
    //log
    $('#log_button').click(function longPolling(){

		$.ajax({
			url: "{% url 'check_log' %}",
			type: 'GET',
			dataType: 'json',
            timeout: 30000,
			async: true,
            error: function(XMLHttpRequest, textStatus, errorThrown){
                $('#log_content').append("<p>[state: "+textStatus+",code "+XMLHttpRequest.status+",error: "+errorThrown+"]</p>");
                scr_log();
                if (textStatus=="timeout") {
                    $('#log_content').append("<p>time out, maybe finished!!!</p>");
                    scr_log();
                }else if(XMLHttpRequest.status=='404'){
                    $('#log_content').append("<p>finished!!!</p>");
                    scr_log();
                }else{
                    longPolling();
                }
            },
			success: function(data, textStatus){
                data = eval(data);
                for(var i =0;i<data.length;i++){
                    $('#log_content').append("<p>"+data[i]+"</p>");
                }

                scr_log();
                if(textStatus== "success"){
                    longPolling();
                }
			}
		})
    })

})
    </script>
</head>
<body>
<div class="container">
	<div class="row clearfix">
		<div class="col-md-2 column">
			<form role="form">
				<div class="form-group">
					 <label>起始ID</label><input type="text" class="form-control" id="s_id" />
				</div>
				<div class="form-group">
					 <label>结束ID</label><input type="text" class="form-control" id="e_id" />
				</div>

				<div class="checkbox">
					 <label><input type="checkbox" id="v" />爬内容页</label>
                </div>
			</form>
            <div id="tips"></div>
            <button type="submit" class="btn btn-default" id="crawl">Submit</button>

		</div>
		<div class="col-md-6 column">

            <button type="button" class="btn btn-primary btn-lg" id="log_button">ON</button>
            <div class="pre-scrollable" id="log_content">

            </div>


		</div>
		<div class="col-md-4 column">
			<div class="list-group">
				 <a href="#" class="list-group-item active">Home</a>
				<div class="list-group-item">
					List header
				</div>
				<div class="list-group-item">
					<h4 class="list-group-item-heading">
						List group item heading
					</h4>
					<p class="list-group-item-text">
						...
					</p>
				</div>
				<div class="list-group-item">
					 <span class="badge">14</span> Help
				</div> <a class="list-group-item active"> <span class="badge">14</span> Help</a>
			</div>
		</div>
	</div>
</div>
</body>
</html>